import React, { Component } from "react";
import MainLayout from "../../../../component/mainLayout/mainLayout";

import "./transactionDetail.scss";

class TransactionDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			channelId: "", // 渠道名称
			productId: "", // 产品编号
			productName: "", // 产品名称
			channelName: "", // 渠道名称
			tradeAmt: "", // 交易金额
			tradeNumber: "", // 订单编号
			tradeStatus: "", // 订单状态：000000-成功，999999-失败，000001 处理中
			tradeType: "", // 交易类型：0-买入，1-卖出
			tradeTime: "" // 交易时间 格式:yyyy-MM-dd HH:mm:ss
		};
	}

	componentDidMount() {
		let pageData = this.props.location.state;
		this.setState({
			channelId: pageData.channelId, // 渠道名称
			productId: pageData.productId, // 产品编号
			productName: pageData.productName, // 产品名称
			channelName: pageData.channelName, // 渠道名称
			tradeAmt: pageData.tradeAmt, // 交易金额
			tradeNumber: pageData.tradeNumber, // 订单编号
			tradeStatus: pageData.tradeStatus, // 订单状态：000000-成功，999999-失败，000001 处理中
			tradeType: pageData.tradeType, // 交易类型：0-买入，1-卖出
			tradeTime: pageData.tradeTime // 交易时间 格式:yyyy-MM-dd HH:mm:ss
		});
	}

	componentWillUnmount() {}

	render() {
		const _pageParams = {
			header: {
				title: "交易详情"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		const orderStatus = status => {
			let _orderStatus = "";
			switch (status) {
				case "000000":
					_orderStatus = "交易成功";
					break;
				case "999999":
					_orderStatus = "交易失败";
					break;
				case "000001 ":
					_orderStatus = "处理中";
					break;
				default:
					_orderStatus = "--";
					break;
			}
			return _orderStatus;
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="TransactionDetail">
					<div className="showBar flexCenter">
						<div>
							<div className="colorBlack font80">{this.state.tradeAmt}</div>
							<div className="colorLight font28">
								{orderStatus(this.state.tradeStatus)}
							</div>
						</div>
					</div>
					<div className="showCon pagePading font28">
						<div className="s_cell flexLeft">
							<div className="l_title colorLight">产品名称</div>
							<div className="l_detail colorBlack">
								{this.state.productName}
							</div>
						</div>
						<div className="s_cell flexLeft">
							<div className="l_title colorLight">银行名称</div>
							<div className="l_detail colorBlack">
								{this.state.channelName}
							</div>
						</div>
						<div className="s_cell flexLeft">
							<div className="l_title colorLight">订单金额</div>
							<div className="l_detail colorBlack">{this.state.tradeAmt}元</div>
						</div>
						<div className="s_cell flexLeft">
							<div className="l_title colorLight">交易时间</div>
							<div className="l_detail colorBlack">{this.state.tradeTime}</div>
						</div>
						<div className="s_cell flexLeft">
							<div className="l_title colorLight">订单号</div>
							<div className="l_detail colorBlack">
								{this.state.tradeNumber}
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

export default TransactionDetail;
